<form action="{#root#}/admin_gallery/save/{$gallery.id}" method="post" enctype="multipart/form-data">
	<input type="submit" class="right" value="Sačuvaj" />
	{include file="admin/translate.html" object=$gallery entity="gallery"}
	
	{include file="admin/session_message.html" class="right"}
	
	<h1>
		{if $gallery.id}
			Izmena Galerije
		{else}
			Nova Galerija
		{/if}
	</h1>

	<label for="title">Naslov:</label>
	<input type="text" name="data[title]" id="title" value="{$gallery.title}" size="50" />
	
	<label for="date">Datum:</label>
	<input type="text" name="data[date]" id="date" value="{$gallery.date|date_format:'%Y-%m-%d'}" size="10" />
	
	<br clear="all" />
	
	<hr />
	
	<ul class="tabs">
		<li class="active"><a href="javascript:void(0)" onclick="ShowTab(this, '#gallery-images-tab');"><img src="{#root#}/img/ico/image.gif" alt="" align="left" style="margin-right:5px" /> Slike (<span id="gallery-count-image">{$gallery.items.image|@count}</span>)</a></li>
		<li><a href="javascript:void(0)" onclick="ShowTab(this, '#gallery-videos-tab');"><img src="{#root#}/img/ico/video.gif" alt="" align="left" style="margin-right:5px" /> Video zapisi (<span id="gallery-count-video">{$gallery.items.video|@count}</span>)</a></li>
	</ul>
	
	<div id="gallery-images-tab" class="tab-content active">
		<div class="left" style="width:220px; height:450px; border-right:1px solid #ccc; margin-right:5px;padding-right:5px;">
			<ul>
				<li><a href="javascript:void(0)" onclick="GalleryItemSetCover();">postavi na naslovnu</a></li>
				<li><a href="javascript:void(0)" onclick="GalleryItemDelete('image');">obriši</a></li>
				<li><a href="javascript:void(0)" onclick="GalleryItemDelete('image', 1);">obriši sve</a></li>
			</ul>
			<div class="header">
				<strong>Dodaj novu sliku:</strong>
				<div style="font-size:10px;">max: {$MAX_FILE_UPLOADS} x {$MAX_UPLOAD_SIZE}B</div>
			</div>
			<div>
				<div class="upload-slot">
					<img src="{#root#}/img/ico/image.gif" align="left" style="margin-top:8px" />
					<input type="file" class="input_file_image" name="file_image[]" size="10" />
					<a href="javascript:void(0)" class="add" onclick="UploadSlotAdd(this);">+</a>
					<a href="javascript:void(0)" class="remove" onclick="var len=$(this).parent().parent().find('.upload-slot').length; if(len>1)$(this).parent().remove()">-</a>
				</div>
			</div>
			
		</div>
		
		<ul class="image-list image" style="width:500px">
			{foreach from=$gallery.items.image item=gi key=k}
			<li class="{if $gi.cover>0}cover{/if}">
				<input type="hidden" name="order[]" value="{$gi.id}" />
				<img src="{#root#}/userfiles/gallery/{$gallery.id}/thumb/{$gi.src}" alt="" />
			</li>
			{/foreach}
		</ul>
	</div>
	
	<div id="gallery-videos-tab" class="tab-content">
		<div class="left" style="width:290px; height:450px; border-right:1px solid #ccc; margin-right:5px;padding-right:5px;">
			<ul>
				<li><a href="javascript:void(0)" onclick="GalleryItemSetCover();">postavi na naslovnu</a></li>
				<li><a href="javascript:void(0)" onclick="GalleryItemDelete('video');">obriši</a></li>
				<li><a href="javascript:void(0)" onclick="GalleryItemDelete('video', 1);">obriši sve</a></li>
			</ul>
			<div class="header">
				<strong>Dodaj novi video:</strong>
				<div style="font-size:10px;">max: {$MAX_FILE_UPLOADS} x {$MAX_UPLOAD_SIZE}B</div>
			</div>
			<div>
				<div class="upload-slot">
					<img src="{#root#}/img/ico/video.gif" align="left" style="margin-top:8px" />
					<input type="file" class="input_file_video" name="file_video[]" size="1" />
					<img src="{#root#}/img/ico/image.gif" align="left" style="margin-top:8px" />
					<input type="file" class="input_file_image" name="file_video_thumb[]" size="1" />
					<a href="javascript:void(0)" class="add" onclick="UploadSlotAdd(this);">+</a>
					<a href="javascript:void(0)" class="remove" onclick="var len=$(this).parent().parent().find('.upload-slot').length; if(len>1)$(this).parent().remove()">-</a>
				</div>
			</div>
			
		</div>
		
		<ul class="image-list video" style="width:480px">
			{foreach from=$gallery.items.video item=gi key=k}
			<li class="{if $gi.cover>0}cover{/if}">
				<input type="hidden" name="order[]" value="{$gi.id}" />
				<img src="{#root#}/userfiles/gallery/{$gallery.id}/thumb/{$gi.thumbnail}" alt="" />
			</li>
			{/foreach}
		</ul>
	</div>
	
</form>
<script type="text/javascript">
var gallery_id = parseInt('{$gallery.id}');
var max_uploads=parseInt('{$MAX_FILE_UPLOADS}');
{literal}

	$("#date").datepicker({
		dateFormat: "yy-mm-dd"
	});
	
	var ul = $(".image-list");
	ul.find("li").click(function(){
		ul.find("li").removeClass("selected");
		$(this).addClass("selected");
	});
	
	ul.sortable();
	ul.disableSelection();

	StylizeFileInputs($("input.input_file_image"), "Odaberite sliku...");
	StylizeFileInputs($("input.input_file_video"), "Odaberite video...");
	
	function StylizeFileInputs(el, title) {
		el.nice_file({
			title: typeof(title)=="undefined" ? null : title,
			cssContainer: {
				float:"left",
				margin:"5px",
			},
			cssDisplay: {
				border:"1px solid #ddd"
			}
		});
	}
	
	function GalleryItemDelete(type, all) {
		all = all?1:0;
		type = type ? type : "image";
		var li, selected;
		var c = "";
		if(all) {
			switch(type) {
				case "video":
					c = "Da li želite da obrišete sve video zapise?";
					break;
				default:
					c = "Da li želite da obrišete sve slike?";
					break;
			}
		}else{
			switch(type) {
				case "video":
					c = "Da li želite da obrišete obeleženi video zapis?";
					break;
				default:
					c = "Da li želite da obrišete obeleženu sliku?";
					break;
			}
		}
		
		if(all) {
			li = $("." + type + ".image-list li");
			id = li.length>0 ? gallery_id : 0;
		}else{
			li = $("." + type + ".image-list li.selected");
			id = parseInt(li.find("input").eq(0).val());
		}
		
		if(id>0) {
			if(!confirm(c)){
				return;
			}
			$.ajax({
				url: root + "/admin_gallery/item_delete/"+id,
				type: "post",
				data: {all: all, type: type},
				complete: function(req){
					if(req.status==200) {
						var status = parseInt(req.getResponseHeader("X-GalleryItemDelete-Status"));
						if(status>0) {
							li.remove();
							$("#gallery-count-"+type).html($("." + type + ".image-list li").length);
						}
					}
				}
			});
		}
	}
	function GalleryItemSetCover() {
		var li = $(".image-list li.selected");
		var id = parseInt(li.find("input").eq(0).val());
		
		if(id>0) {
			$.ajax({
				url: root + "/admin_gallery/item_set_cover/"+id,
				complete: function(req){
					if(req.status==200) {
						var status = parseInt(req.getResponseHeader("X-GalleryItemSetCover-Status"));
						if(status>0) {
							$(".image-list li").removeClass("cover");
							li.addClass("cover");
						}
					}
				}
			});
		}
	}

	function UploadSlotAdd(link) {
		var slots = $(link).parent().parent().find('.upload-slot');
		if(slots.length < max_uploads) {
			var clone = $(link).parent().clone();
			clone.find("input[type=file]").nice_file_events();
			$(link).parent().after(clone);
		}
	}
	
{/literal}
</script>